<#include "/classic/inc/layout.ftl"/>
<@layout>

<style type="text/css">
    #a{
        top:200px;
        left:350px;
        width:100px;
        height:100px;
        -moz-border-radius:30px;
        -webkit-border-radius:30px;
        border-radius:25px;/*倒角半径*/
        /*阴影*/box-shadow: 5px/*左右偏移，负值左，正值右*/ 3px/*上下偏移，负值上，正值下*/ 25px/*虚化度，值越大越虚*/ red;
        background-color:#0F0;
        position:absolute;
    }
</style>

<script type="text/javascript" charset="utf-8" src="${base}/dist/js/jquery.min.js"></script>

<div class="row">

    <div class="row">

        <div class="col-6 col-md-4">

            <div  style="float: left;">

            		<canvas hidden="hidden" id="canvas" width="626" height="800"></canvas>
            		<video id="video" width="100%" height="400px" autoplay></video>
            </div>


        </div>

        <div class="col-6 col-md-4 floating-box">
            <div class="panel panel-default" id="loginDiv">
                <div class="panel-heading">
                    <h3 class="panel-title">请登录</h3>
                </div>
                <div class="panel-body">
                    <div id="message"><#include "/classic/inc/action_message.ftl"/></div>
                    <form method="POST" action="login" accept-charset="UTF-8">
                        <div class="form-group">
                            <label class="control-label" for="username">账号</label>
                            <input class="form-control" name="username" type="text" required>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="password">密码</label>
                            <input class="form-control" name="password" type="password" required>
                        </div>
                        <div class="form-group">
                            <label>
                                <input type="checkbox" name="rememberMe" value="1"> 记住登录
                            </label>
                            <span class="pull-right">
                                <a class="forget-password" href="${base}/forgot">忘记密码？</a>
                            </span>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary btn-block">
                                登录 Use it
                            </button>
                            <br>
                            <!--<a href="/faceLogin/login"  class="btn btn-primary btn-block" >
                                                        人脸识别登陆
                             </a>-->
                             <button  id="faceButton" class="btn btn-primary btn-block">
                                                             人脸识别登录
                              </button>



                        </div>
                        <@controls name="register">
                            <fieldset class="form-group">
                                <#if site.hasValue("weibo_client_id")>
                                <a class="btn btn-default btn-block" href="${base}/oauth/callback/call_weibo">
                                    <i class="fa fa-weibo"></i> 微博帐号登录
                                </a>
                                </#if>
                                <#if site.hasValue("qq_app_id")>
                                <a class="btn btn-default btn-block" href="${base}/oauth/callback/call_qq">
                                    <i class="fa fa-qq"></i> QQ帐号登录
                                </a>
                                </#if>
                                <#if site.hasValue("github_client_id")>
                                <a class="btn btn-default btn-block" href="${base}/oauth/callback/call_github">
                                    <i class="fa fa-github"></i> Github帐号登录
                                </a>
                                </#if>
                            </fieldset>
                        </@controls>
                    </form>
                </div>
            </div>

            <div id="faceDiv" style="display:none">
                <div class="form-group" >
                    <label class="control-label" for="username">用户名</label>
                    <input class="form-control" name="username" type="text" required id="username">
                </div>
                <button id="open"  class="btn btn-primary btn-block">开启摄像头</button>
                <button id="close" class="btn btn-primary btn-block">关闭摄像头</button>
                <button id="CatchCode" class="btn btn-primary btn-block">识别</button>
                <button id="addFace" class="btn btn-primary btn-block">录入人脸</button>
                 <button id="closeDiv"  class="btn btn-primary btn-block">关闭人脸识别</button>
            </div>


        </div>


        <div class="col-6 col-md-4">


        </div>


    </div>
</div>


<!-- 点击后显示div -->
<script type="text/javascript">
    document.getElementById("faceButton").onclick = function(){
        document.getElementById("faceDiv").style.display = "block";
        document.getElementById("loginDiv").style.display = "none";


    }

    document.getElementById("closeDiv").onclick = function(){
            document.getElementById("faceDiv").style.display = "none";
            document.getElementById("loginDiv").style.display = "block";
        }

</script>


<script type="text/javascript">
var video;//视频流对象
var context;//绘制对象
var canvas;//画布对象
$(function() {
	var flag = false;
	//开启摄像头
	$("#open").click(function() {
		//判断摄像头是否打开
		if (!flag) {
			//调用摄像头初始化
			open();
			flag = true;
		}
	});
	//关闭摄像头
	$("#close").click(function() {
		//判断摄像头是否打开
		if (flag) {
			video.srcObject.getTracks()[0].stop();
			flag = false;
		}
	});
	//录入人脸
    $("#addFace").click(function() {
    	if (flag) {
    		context.drawImage(video, 0, 0, 330, 250);
    		addFace();
    	} else
    		alert("请先开启摄像头!");
    });

	//拍照
	$("#CatchCode").click(function() {
		if (flag) {
			context.drawImage(video, 0, 0, 330, 250);
			CatchCode();
		} else
			alert("请先开启摄像头!");
	});
});




//将当前图像传输到后台
function addFace() {
	//获取图像
	var img = getBase64();
	var username=document.getElementById('username').value;


	//Ajax将Base64字符串传输到后台处理
	$.ajax({
		type : "POST",
		url : "/faceLogin/addFace",
		data : {
			img : img ,
			username : username
		},
		dataType : "JSON",
		success : function(data) {

            var data = $.parseJSON(data);
            console.log(data)


            if(data.error_msg == "param[user_id] format error"){
                alert("请输入用户名")
            }else if(data.error_msg == "pic not has face"){
                alert("图片中没有人脸")
            }else{
                alert(data.error_msg)

            }


		},
		error : function(q, w, e) {
			alert(q + w + e);
		}
	});
};


//将当前图像传输到后台
//搜索人脸的代码
function CatchCode() {
	//获取图像
	var img = getBase64();
	var username=document.getElementById('username').value;
	//Ajax将Base64字符串传输到后台处理
	$.ajax({
		type : "POST",
		url : "/faceLogin/searchFace",
		data : {
			img : img ,
			username : username
		},
		dataType : "JSON",
		success : function(data) {

            var data = $.parseJSON(data);

            console.log(data)

            if(data.error_msg == "param[user_id] format error"){
                alert("请输入用户名")
            }else if(data.error_msg == "pic not has face"){
                alert("图片中没有人脸")
            }else if(data.result == null){
                alert(data.error_msg)
                console.log(data)
            }




			//返回的结果
			//取出对比结果的返回分数，如果分数90以上就判断识别成功了
			if(parseInt(data.result.user_list[0].score) > 90) {


				//关闭摄像头
				video.srcObject.getTracks()[0].stop();
				//提醒用户识别成功
				alert("验证成功!");
				//验证成功跳转页面
				window.location.href="http://localhost:8080/users/"+data.id;
	  		}else{
	  		    alert("识别失败：当前分数："+data.result.user_list[0].score);
	  		}
		},
		error : function(q, w, e) {
			alert(q + w + e);
		}
	});
};





//开启摄像头
function open() {
	//获取摄像头对象
	canvas = document.getElementById("canvas");
	context = canvas.getContext("2d");
	//获取视频流
	video = document.getElementById("video");
	var videoObj = {
		"video" : true
	}, errBack = function(error) {
		console.log("Video capture error: ", error.code);
	};
	context.drawImage(video, 0, 0, 330, 250);
	//初始化摄像头参数
	if (navigator.getUserMedia || navigator.webkitGetUserMedia
			|| navigator.mozGetUserMedia) {
		navigator.getUserMedia = navigator.getUserMedia
				|| navigator.webkitGetUserMedia
				|| navigator.mozGetUserMedia;
		navigator.getUserMedia(videoObj, function(stream) {
			video.srcObject = stream;
			video.play();
		}, errBack);
	}
}
//将摄像头拍取的图片转换为Base64格式字符串
function getBase64() {
	//获取当前图像并转换为Base64的字符串
	var imgSrc = canvas.toDataURL("image/png");
	//截取字符串
	return imgSrc.substring(22);
};
</script>

</@layout>

